<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<style>
    td,th {
        border: 1px solid black;
    }
</style>
<script>
    function btnClick() {
        $.ajax({
            url : "/book_search",
            type : "GET",
            data : {"searchBook":"test"},
            contentType:"application/x-www-form-urlencoded;charset=UTF-8",
            success : function (data) {
                $(".book_recorde").html(data);
            },
            error:function (errorMsg) {
                console.log(errorMsg);
            }
        })
    }
</script>
<body>
<div>
    <button type="button" onclick="btnClick()">TEST</button>
</div>
<div class="book_recorde" th:fragment="book_recorde">
    <table id="myTable">
        <tr>
            <th>Name</th>
            <th>Value</th>
        </tr>
        <tr th:each="bookRecorde:${bookRecordes}">
            <td th:text="${bookRecorde.bookName}"></td>
            <td th:text="${bookRecorde.num}"></td>
        </tr>
    </table>
</div>

</body>
</html>